<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WaterBall demo by zedwang.github.io</title>
    <style>
        * {
            margin:0;
            padding:0;
            box-sizing: border-box;
            font-size: 100%;
        }
        .container {
            width: 800px;
            margin: 20px auto;
        }
        .container-x {
            width: 1000px;
            margin: 0px auto;
        }
        .canvas {
            float: left;
            width: 500px;
            text-align: center;

        }
        .toolbar {
            padding: 10px;
            float: right;
            width: 300px;
        }
        .toolbar p {
            margin: 10px 0;
        }
        .toolbar p b {
            margin-right: 15px;
        }
        .banner {
            width: 100%;
            height: 300px;
            background: linear-gradient(45deg,#020031 0,#6d3353 100%);
            overflow: hidden;
            text-transform: Capitalize;
            text-align: center;
            color: #ffffff;
        }
        .banner:after {
            content: ' ';
            display: block;
            position: absolute;
            top:0;
            right: 0;
            left: 0;
            background: url("./bs-docs-masthead-pattern.png") repeat center;
            opacity: .4;
        }
        .banner h1 {
            margin-top: 85px;

            font-size: 3rem;
        }
        .banner p {
            margin-top: 1rem;
        }


    </style>
    <script src="../dist/water-ball.js"></script>
</head>
<body>
<div class="banner">
    <div class="container-x">
        <h1>water ball</h1>
        <p>a canvas component.simple,light!</p>
    </div>

</div>
<div class="container">
    <div class="canvas">
        <script id="container0"></script>
    </div>

    <div class="toolbar">
            <p><b>value:</b><input type="number" name="value" max="100" min="1" value="50"><span></span></p>
            <p><b>speed:</b><input type="number" name="speed" max="5" min="0"  step="0.01" value="0.1"></p>
            <p><b>wave width:</b><input type="number" name="waveWidth" max="5" min="0"  step="0.01" value="0.02"></p>
            <p><b>wave height:</b><input type="number" name="waveHeight" max="20" min="1" value="8"></p>
            <p><button type="button" id="sub">确认</button></p>
    </div>
</div>



<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>

<script type="text/javascript">
    var wb = new WaterBall('container0',{
            value:50,
            r:120,
            borderColor:'#2766fe',
            color:'#000000',
            format: function(value) {
                return value + 'kg';
            },
            waveStyle:['#6fc0fe','#2766fe']
        })
        .render();

    $("#sub").bind('click',function () {
        var options = {}
        var inps = $('input');

        inps.each(function () {
            options[this.name] = Number(this.value);
        })

        wb.setOptions(options);
    })

</script>
</body>
</html>
